<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input class="filter-item" v-model="listQuery.hotel_id" placeholder="子酒店ID" style="width: 220px;" clearable/>

      <el-input class="filter-item" v-model="listQuery.basic_room_type_id" placeholder="子物理房型ID" style="width: 220px;" clearable/>

      <el-input class="filter-item" v-model="listQuery.room_type_id" placeholder="售卖房型ID" style="width: 220px;" clearable/>

      <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="子酒店ID" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.hotel_id }}
        </template>
      </el-table-column>

      <el-table-column label="子物理房型ID" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.basic_room_type_id }}
        </template>
      </el-table-column>

      <el-table-column label="售卖房型ID" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.room_type_id }}
        </template>
      </el-table-column>

      <el-table-column label="创建时间" min-width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.created_at }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="250" align="center" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleViewPushRoomData(scope.row)">查看推送房型数据</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[5,10,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <!-- 查看推送房型数据 -->
    <el-dialog title="查看推送房型数据" :visible.sync="dialogVisibleViewPushRoomData" width="60%" :close-on-click-modal="false">
      <el-table v-if="pushRoomDataLog" :data="pushRoomDataLog.room_data" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column label="子物理房型ID" min-width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.roomId }}
          </template>
        </el-table-column>

        <el-table-column label="售卖房型ID" min-width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.infoId }}
          </template>
        </el-table-column>

        <el-table-column label="日期" min-width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.priceDate }}
          </template>
        </el-table-column>

        <el-table-column label="售价" min-width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.price }}
          </template>
        </el-table-column>

        <el-table-column label="房量" min-width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.currentAlloment }}
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleViewPushRoomData = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 查看推送房型数据 -->
  </div>
</template>

<script>
  import request from "@/utils/request";

  export default {
    data() {
      return {
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10,
          hotel_id: "",
          basic_room_type_id: "",
          room_type_id: "",
        },
        // 查看推送房型数据
        dialogVisibleViewPushRoomData: false,
        pushRoomDataLog: null,
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.listLoading = true;
        request({
          url: "/api/backend/room/pushRoomDataLogList",
          method: "get",
          params: this.listQuery,
        }).then(response => {
          this.list = response.data.items;
          this.total = response.data.total;
          this.listLoading = false;
        });
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      // 查看推送房型数据
      handleViewPushRoomData(row) {
        this.pushRoomDataLog = row;
        this.dialogVisibleViewPushRoomData = true;
      },
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
